<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于Masonry瀑布流的全屏预览图片画廊插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" href="dist/stylesheets/chromagallery.min.css" />
    <style type="text/css">
      body,
      html {
        height: 100%;
      }
      .content {
        width: 100%;
        height: 100%;
        margin: 10px auto;
      }
      @media screen and (min-width: 980px) /* Desktop */ {
        .content {
          width: 70%;
        }
      }
      .mygallery {
        margin: 25px 0;
      }
    </style>
    <!--[if IE]>
      <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <article class="htmleaf-container">
      <header class="htmleaf-header">
        <h1>
          基于Masonry瀑布流的全屏预览图片画廊插件
          <span>An image gallery that allows you to organize your photos into grids and enlarge them elegantly</span>
        </h1>
        <div class="htmleaf-links">
          <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"
            ><span> jQuery之家</span></a
          >
          <a
            class="htmleaf-icon icon-htmleaf-arrow-forward-outline"
            href="http://www.htmleaf.com/jQuery/pubuliuchajian/201510282715.html"
            title="返回下载页"
            target="_blank"
            ><span> 返回下载页</span></a
          >
        </div>
      </header>
      <div class="content">
        <div class="chroma-gallery mygallery">
          <img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg" />
          <img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg" />
          <img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg" />
          <img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg" />
          <img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg" />
          <img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg" />
          <img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg" />
          <img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg" />
          <img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg" />
          <img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg" />
        </div>
      </div>
      <footer class="related">
        <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
        <a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201509282629.html">
          <img src="related/1.jpg" width="300" alt="5种超炫jQuery和CSS3响应式弹出层图片画廊特效" />
          <h3>5种超炫jQuery和CSS3响应式弹出层图片画廊特效</h3>
        </a>
        <a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201508282489.html">
          <img src="related/2.jpg" width="300" alt="jQuery轻量级响应式LightBox图片画廊插件" />
          <h3>jQuery轻量级响应式LightBox图片画廊插件</h3>
        </a>
      </footer>
    </article>

    <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>
      window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
    </script>
    <script src="dist/scripts/chromagallery.pkgd.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $('.mygallery').chromaGallery()
      })
      // $(document).ready(function () {
      //   $('.mygallery').chromaGallery()
      // })
      // $(document).ready(function(){
      // 	$(".mygallery").chromaGallery
      //     ({
      //         color:'#000',
      //         gridMargin:15,
      //         maxColumns:5,
      //         dof:true,
      //         screenOpacity:0.8
      //     });
      // });
    </script>
  </body>
</html>
